<template>
    <div id="app">
        <Header>
            <template v-slot:left>
                <h1>河南研学实践综合管理平台</h1>
            </template>
            <template v-slot:right class="right">
                <div v-show="!isBeSearch">
                    <div class="register">
                        <img src="@/assets/images/login.png">
                        <span>立即注册</span>
                    </div>
                    |
                    <div class="login">
                        <i class="el-icon-school"/>
                        <span>立即登录</span>
                    </div>
                </div>
                <div class="search" v-show="isBeSearch">
                    <el-input placeholder="搜索关键字" size="medium" v-model="keyWord">
                        <i slot="suffix" class="el-input__icon el-icon-search"/>
                    </el-input>
                </div>
            </template>
        </Header>
        <NavBar :titles=titles @nav-click="linkClick"/>
        <router-view :keyWord="keyWord">

        </router-view>
    </div>
</template>

<script>

    import NavTab from "@/component/navbar/NavTab";
    import Header from "./component/header/Header";
    import NavBar from "./component/navbar/NavBar";
    import titles from "./config/navbarConfig";
    import {Icon, Input, Button} from "element-ui";

    export default {
        name: 'App',
        components: {
            "el-icon": Icon,
            "el-input": Input,
            "el-button": Button,
            NavTab,
            NavBar,
            Header,
        },
        created() {
            const path = window.location.href.split("/").reverse()[0];
            const title = this.titles.find(item => item.path === ("/" + path));
            this.isBeSearch = title.isBeSearch;
        },

        methods: {
            linkClick(flag) {
                this.isBeSearch = flag;
            }
        },
        data() {
            return {
                isBeSearch: false,
                titles,
                keyWord: ''
            }
        },
    }
</script>

<style>
    @import url("assets/normalize.css");
    /*@import url("assets/reset.css");*/
</style>
